<template>
    <div class="Hcontent">
        <div class="container" id="container">
        <a href="" class="logo"><img src="../assets/images/logo_mobi.png" alt=""></a>
        <div class="topR">
            <a href=""><i></i>购买咨询</a>
            <a href=""><i class="qq"></i>QQ咨询</a>
        </div>
        
    </div>
    <div class="scroll" v-if="flags"></div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            flags:false
        }
    },
   mounted(){
       window.addEventListener("scroll",function(){
            var mysroll=document.documentElement.scrollTop
        //    console.log(mysroll)
        if(mysroll>0){
           
            container.style.position="fixed"
            container.style.y=0
            container.style.background="rgba(73,180,79,.8)"
            this.flags=true
             console.log(this.flags)
        }else{
             container.style.position="static"
           
        }
       })
    // .onscroll=function(){
    //        var mysroll=document.documentElement.scrollTop
    //     //    console.log(mysroll)
    //     if(mysroll>0){
    //         container.style.position="fixed"
    //         container.style.y=0
    //     }
    //    }
   }
}
</script>
<style scoped>
.Hcontent{width:100%;background: #49b44f;}
.container{width:100%;z-index:999;height:1rem;background: #49b44f;} 
.scroll{height:1rem}
.logo{height:1rem;line-height: 1rem;float: left;margin-left:  0.25rem}
img{height:0.45rem;vertical-align: middle}
.topR{ float: left;margin-left: 1.2rem;}
.topR a{margin-right: 0.3rem;line-height: 1rem;font-size:0.2rem;color:#fff}
.topR a:last-child{margin-right:0}
.topR a i{display:inline-block;width: 0.45rem;height:0.45rem;margin-right:0.15rem}
.topR a i:nth-of-type(1){background: url(../assets/images/phone.png) no-repeat;background-size: cover;vertical-align: middle}
.topR a i.qq{background: url(../assets/images/qq.png) no-repeat;background-size: cover;vertical-align: middle}
</style>


